<!--
 * @Author: anonymous
 * @Date: 2022-05-18 20:47:03
 * @LastEditors: anonymous
 * @LastEditTime: 2022-05-18 22:54:23
 * @FilePath: /adminClient/src/components/UpdatePass.vue
 * @Description:
-->
<template>
  <div class="update-password-container">
    <div class="form-header">
      <i class="fa fa-key icon-key"></i>
      <h2>修改密码</h2>
    </div>
    
    <el-form 
      ref="ruleFormRef" 
      :model="pass" 
      :rules="rules" 
      label-position="top" 
      class="password-form"
      status-icon
    >
      <el-form-item label="原密码" prop="oldPass">
        <el-input 
          type="password" 
          show-password 
          v-model="pass.oldPass" 
          placeholder="请输入原密码" 
          clearable 
        />
      </el-form-item>
      
      <el-form-item label="新密码" prop="newPass1">
        <el-input 
          type="password" 
          show-password 
          v-model="pass.newPass1" 
          placeholder="请输入新密码" 
          clearable 
        />
      </el-form-item>
      
      <el-form-item label="确认新密码" prop="newPass2">
        <el-input 
          type="password" 
          show-password 
          v-model="pass.newPass2" 
          placeholder="请再次输入新密码" 
          clearable 
        />
      </el-form-item>
      
      <div class="error-message" v-if="passwordError">
        {{ passwordError }}
      </div>
      
      <el-form-item>
        <el-button 
          type="primary" 
          :loading="loading"
          @click="submitForm(ruleFormRef)"
        >
          保存修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref } from 'vue'
import UpdatePassData, { rules } from '@/model/main/layout/dynamicNav/UpdatePass'
import _cloneDeep from 'lodash/cloneDeep'
import { ElMessage, FormInstance } from 'element-plus'
import { updatePass } from '@/plugins/request/http'
import { Md5 } from 'ts-md5/dist/md5'
import { responseEnum, responseUtil } from '@/plugins/request/responseUtil'
import { pubKeyEncrypt } from '@/plugins/encrypt/rsa'
import { useStore } from '@/plugins/store/store'

export default defineComponent({
  name: 'UpdatePass',
  setup (props, context) {
    const store = useStore()
    const coreData = reactive(new UpdatePassData())
    const passwordError = ref('')
    const loading = ref(false)

    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      passwordError.value = ''
      
      await formEl.validate((valid, fields) => {
        if (valid) {
          updatePassFn()
        }
      })
    }

    const updatePassFn = async () => {
      const data = _cloneDeep(coreData.pass)
      if (data.newPass1 !== data.newPass2) {
        passwordError.value = '两次输入的新密码不一致，请重新输入'
        return
      }

      loading.value = true
      try {
        data.oldPass = Md5.hashStr(data.oldPass)
        data.newPass1 = Md5.hashStr(data.newPass1)
        delete data.newPass2
        const encryptData = pubKeyEncrypt(store.publicKey, JSON.stringify(data))
        if (!encryptData) {
          ElMessage.warning('保存失败，请刷新页面后重试')
          return
        }
        const result = await (await updatePass(encryptData)).data as responseUtil
        
        if (result.code === responseEnum.OK) {
          ElMessage.success(result.msg || '密码修改成功')
          context.emit('closeDrawer')
        } else {
          ElMessage.error(result.msg || '密码修改失败')
        }
      } catch (error) {
        ElMessage.error('操作失败，请稍后重试')
      } finally {
        loading.value = false
      }
    }

    return {
      ...toRefs(coreData),
      submitForm,
      rules,
      passwordError,
      loading
    }
  }
})
</script>

<style lang='scss' scoped>
.update-password-container {
  max-width: 450px;
  margin: 0 auto;
  padding: 0 20px;
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  
  .icon-key {
    font-size: 28px;
    color: #1e88e5;
    margin-right: 15px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(30, 136, 229, 0.1);
  }
  
  h2 {
    margin: 0;
    font-weight: 500;
    color: #333;
    font-size: 22px;
  }
}

.password-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
    padding-bottom: 8px;
    color: #333;
  }
  
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #1e88e5 inset;
    }
  }
  
  .error-message {
    color: #f56c6c;
    margin: 5px 0 15px;
    font-size: 14px;
    text-align: left;
    padding: 10px 15px;
    background-color: #fef0f0;
    border-radius: 4px;
    border-left: 3px solid #f56c6c;
  }
  
  :deep(.el-form-item__error) {
    padding-top: 4px;
  }
  
  .el-button {
    width: 100%;
    height: 40px;
    font-size: 15px;
    margin-top: 10px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  }
}
</style>

